<template>
  <div class="carousel">
    <i class="iconfont left" @click="sub()">&#xe601;</i>
    <i class="iconfont right" @click="add()">&#xe602;</i>
    <div class="carousel-main">
      <TransitionGroup name="list">
        <router-link class="carousel-item"
        v-for="(item,i) in shownow"
        :key="i"
        :to="{path: 'word', query: {name: item.listname }}"
        >
        <img :src="item.imgsrc">
        </router-link>
      </TransitionGroup>
    </div>

    <div class="indexbox">
      <ul>
        <li @click="check(0)" :class="{acti:now===0}"></li>
        <li @click="check(3)" :class="{acti:now===3}"></li>
        <li @click="check(6)" :class="{acti:now===6}"></li>
      </ul>
    </div>
  </div>
</template>
<script>
import { getCarousel } from '@/api/home'
export default {
  name: 'carousel-vue',
  data: function () {
    return {
      timer: null,
      now: 0,
      shownow: [],
      showlist: []
    }
  },
  methods: {
    sub () {
      this.shownow = []
      if (this.now >= 3) {
        this.now = this.now - 3
      } else {
        this.now = 6
      }
    },
    add () {
      this.shownow = []
      if (this.now <= 3) {
        this.now = this.now + 3
      } else {
        this.now = 0
      }
    },
    check (num) {
      this.shownow = []
      this.now = num
    }
  },
  watch: {
    now (newval, oldval) {
      if (newval > 6) {
        this.now = 0
        this.shownow = []
        // setTimeout(() => {
        //   this.shownow.unshift(this.showlist[this.now], this.showlist[this.now + 1], this.showlist[this.now + 2])
        // }, 200)
        // console.log(this.now)
        // console.log(this.shownow)
      } else {
        this.now = newval
        this.shownow = []
        setTimeout(() => {
          this.shownow.unshift(this.showlist[this.now], this.showlist[this.now + 1], this.showlist[this.now + 2])
        }, 200)
      }
    }
  },
  created () {
    getCarousel().then((res) => {
      // console.log(res.data.list)
      this.showlist = res.data.list
      this.shownow.push(this.showlist[0], this.showlist[1], this.showlist[2])
      this.timer = setInterval(() => {
        this.now = this.now + 3
      }, 5000)
    })
  },
  beforeUnmount () {
    clearInterval(this.timer)
  }
}
</script>
<style scoped lang="less">
.carousel{
  border-bottom: 1px solid rgb(232, 229, 229);
  height: 150px;
  width: 640px;
  position: relative;
  .carousel-main{
    display: flex;
    margin: 0 auto;
    width: 570px;
    height: 120px;
    .carousel-item{
      display: block;
      border-radius: 10px;
      margin: 10px;
      margin-top: 30px;
      height: 90px;
      width: 170px;
      padding: 5px;
      img{
        border: 1px solid #666;
        height:80px;
        border-radius: 10px;
      }
    }
  }
}

.indexbox{
  position: absolute;
  bottom: 0px;
  padding-left: 300px;
  li{
    list-style: none;
    height: 10px;
    width: 10px;
    border-radius: 100%;
    background-color: rgb(218, 218, 218);
    float: left;
    margin: 5px;
    cursor: pointer;
  }
  .acti{
    background-color: #3e87e5;;
  }
}
.left{
  font-weight: 900;
  cursor: pointer;
  font-size: 20px;
  position: absolute;
  top: 40%;
  left: 0px;
  color: rgb(128, 128, 128);
}
.right{
  font-weight: 900;
  cursor: pointer;
  font-size: 20px;
  position: absolute;
  top: 40%;
  right: 0px;
  color: rgb(128, 128, 128);
}

.list-move, /* 对移动中的元素应用的过渡 */
  .list-enter-active,
  .list-leave-active {
    transition: all 0.5s ease;
  }

  .list-enter-from,
  .list-leave-to {
    opacity: 0;
    transform: translateX(-30px);
  }

  /* 确保将离开的元素从布局流中删除
    以便能够正确地计算移动的动画。 */
  .list-leave-active {
    position: absolute;
  }
</style>
